<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="province"></select>
		<select id="city"></select>
		
		<script>
			var regions = [
				{province:"北京市",cities:["东城区","西城区","海淀区","朝阳区"]},
				{province:"上海市",cities:["徐汇区","静安区","宝山区"]},
				{province:"天津市",cities:["南开区","河东区"]},
				{province:"重庆市",cities:[]}
			];
			var province = document.getElementById("province");
			var city = document.getElementById("city");
			
			regions.forEach(function(item){
				var option = document.createElement("option");
				option.innerHTML = item.province;
				province.appendChild(option);
			});			
			province.onchange = function(){
				var selectedProvince = province.value;
				for(var i=0;i<regions.length;i++){
					if(regions[i].province == selectedProvince){
						city.innerHTML = "";
						var cities = regions[i].cities;
						for(var j=0;j<cities.length;j++){
							var option = document.createElement("option");
							option.innerHTML = cities[j];
							city.appendChild(option);
						}
						break;
					}
				}
			};
			province.onchange();
		</script>
	</body>
</html>
